import BaseBarChartComponent from "./base-bar-chart.js";
// 瀑布图组件（使用双系列叠加实现）
class WaterfallChart extends BaseBarChartComponent {
    // 重写观察的属性列表，添加瀑布图特有属性
    static get observedAttributes() {
        const parentAttributes = super.observedAttributes;
        return [
            ...parentAttributes,
            'waterfall-sum-show_radio',       // 是否显示总和
            'waterfall-sum-label_text',       // 总和标签
            'waterfall-sum-color_colorpicker',// 总和颜色
            'waterfall-connector-show_radio', // 是否显示连接线
            'waterfall-connector-color_colorpicker', // 连接线颜色
            'waterfall-positive-color_colorpicker',  // 正值颜色
            'waterfall-negative-color_colorpicker',   // 负值颜色
            'series-label-show_radio',
            'series-label-position_select',
            'series-label-color_colorpicker',
            'series-label-fontsize_number',
            'series-label-fontweight_select',
            'series-barmaxwidth_slider',
        ];
    }

    // 重写默认配置，添加瀑布图相关配置
    getDefaultConfig() {
        const parentConfig = super.getDefaultConfig();

        // 添加瀑布图特有配置
        parentConfig.seriesAttrs.push(
            ['series-type_select', 'bar'],
            ['waterfall-sum-show_radio', true],
            ['waterfall-sum-label_text', '总计'],
            ['waterfall-sum-color_colorpicker', '#333333'],
            ['waterfall-connector-show_radio', true],
            ['waterfall-connector-color_colorpicker', '#cccccc'],
            ['waterfall-positive-color_colorpicker', '#22c55e'],
            ['waterfall-negative-color_colorpicker', '#ef4444']
        );

        return parentConfig;
    }

    // 重写生成系列配置的方法，使用双系列叠加实现瀑布图
    generateSeries(dataDemo, seriesConfig) {
        // 处理数据，提取两组值和标签
        const processedData = this.processWaterfallData(dataDemo);
        const { placeholderData, lifeCostData } = processedData;

        // 获取 JSON 中的两个 key
        const firstKey = Object.keys(dataDemo[0])[0];
        const secondKey = Object.keys(dataDemo[1])[0];

        // 1. 创建占位符系列（透明）
        const placeholderSeries = {
            type: 'bar',
            stack: 'Total', // 使用相同的 stack 实现叠加
            itemStyle: {
                borderColor: 'transparent',
                color: 'transparent' // 透明占位，只用于定位
            },
            emphasis: {
                disabled: true // 悬停时不高亮
            },
            data: placeholderData
        };

        // 2. 创建实际数据系列
        const lifeCostSeries = {
            name: secondKey, // 动态使用第二个 key
            type: 'bar',
            stack: 'Total',
            label: {
                show: true,
                position: 'inside',
                formatter: params => {
                    const value = params.value >= 0 ? `+${params.value}` : params.value;
                    return value;
                },
                color: '#fff',
                fontWeight: 'bold'
            },
            data: lifeCostData.map((value, index) => ({
                value,
                itemStyle: this.getItemStyle(value, index, false, seriesConfig, lifeCostData)
            })),
            emphasis: {
                focus: 'series'
            }
        };

        // 返回系列数组
        return [placeholderSeries, lifeCostSeries];
    }



    // 处理瀑布图数据，提取两个系列的数据
    processWaterfallData(dataDemo) {
        if (!Array.isArray(dataDemo) || dataDemo.length < 2) {
            console.error('数据格式错误，至少需要包含两个对象');
            return {
                placeholderData: [],
                lifeCostData: [],
                labels: []
            };
        }

        // 获取第一个对象的第一个 key 和对应数组
        const firstObj = dataDemo[0];
        const firstKey = Object.keys(firstObj)[0];
        const placeholderData = firstObj[firstKey] || [];

        // 获取第二个对象的第一个 key 和对应数组
        const secondObj = dataDemo[1];
        const secondKey = Object.keys(secondObj)[0];
        const lifeCostData = secondObj[secondKey] || [];

        // 提取标签（取第一个对象的 name）
        const labels = placeholderData.map(item => item.name);

        // 提取数值
        const placeholderValues = placeholderData.map(item => item.value);
        const lifeCostValues = lifeCostData.map(item => item.value);

        return {
            placeholderData: placeholderValues,
            lifeCostData: lifeCostValues,
            labels
        };
    }


    // 获取每个柱子的样式
    getItemStyle(value, index, hasSum, seriesConfig, data) {
        // 判断是否为总和项
        if (hasSum && index === data.length - 1) {
            return {
                color: seriesConfig.waterfallSumColor || '#333333'
            };
        }

        // 区分正负值颜色
        return {
            color: value >= 0
                ? seriesConfig.waterfallPositiveColor || '#22c55e'
                : seriesConfig.waterfallNegativeColor || '#ef4444'
        };
    }

    // 重写默认数据，匹配指定格式
    getDefaultData() {
        return [
            {
                "Placeholder": [
                    {"name": "Total", "value": 0},
                    {"name": "Rent", "value": 1700},
                    {"name": "Utilities", "value": 1400},
                    {"name": "Transportation", "value": 1200},
                    {"name": "Meals", "value": 300},
                    {"name": "Other", "value": 0}
                ]
            },
            {
                "Life Cost": [
                    {"name": "Total", "value": 2900},
                    {"name": "Rent", "value": 1200},
                    {"name": "Utilities", "value": 300},
                    {"name": "Transportation", "value": 200},
                    {"name": "Meals", "value": 900},
                    {"name": "Other", "value": 300}
                ]
            }
        ];
    }

    // 重写渲染图表方法，调整X轴数据
    renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, data = null) {
        let dataDemo = data || this.getDefaultData();
        const processedData = this.processWaterfallData(dataDemo);

        // 设置X轴数据为处理后的标签
        xAxisConfig.data = processedData.labels;

        // 调用父类方法完成渲染
        super.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, dataDemo);
    }

    // 重写处理属性变化的方法，添加瀑布图特有处理
    handleAttributeChange(name, value, currentOptions) {
        // 先调用父类方法处理已有属性
        super.handleAttributeChange(name, value, currentOptions);

        // 处理瀑布图特有属性
        switch (name) {

            case 'waterfall-negative-color_colorpicker':
                // 这些属性需要重新生成系列
                this.reRenderChart();
                break;
            case 'waterfall-sum-color_colorpicker':
                this.updateSumColor(value, currentOptions);
                break;
            case 'waterfall-connector-color_colorpicker':
                this.updateConnector(value, name, currentOptions);
                break;
            case 'series-label-show_radio':
                this.updateSeriesLabelShow(value, currentOptions);
                break;
            case 'series-label-position_select':
                this.updateSeriesLabelPosition(value, currentOptions);
                break;
            case 'series-label-color_colorpicker':
                this.updateSeriesLabelColor(value, currentOptions);
                break;
            case 'series-label-fontsize_number':
                this.updateSeriesLabelFontSize(value, currentOptions);
                break;
            case 'series-label-fontweight_select':
                this.updateSeriesLabelFontWeight(value, currentOptions);
                break;
            case 'series-barmaxwidth_slider':
                this.updateSeriesBarMaxWidth(value, currentOptions);
                break;
        }
    }
    // 1. 柱体最大宽度更新方法
    updateSeriesBarMaxWidth(value, currentOptions) {
        // 检查当前配置中是否存在系列配置
        if (currentOptions.series) {
            // 遍历所有系列项，设置柱状图最大宽度
            currentOptions.series.forEach((seriesItem, index) => {
                // 确保系列项配置存在
                currentOptions.series[index] = currentOptions.series[index] || {};

                // 设置柱状图最大宽度（转换为整数）
                currentOptions.series[index].barMaxWidth =value.includes('%') ? value : `${value}%`;
            });

            // 应用更新后的配置到图表
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签字体大小更新方法
    updateSeriesLabelFontSize(value, currentOptions) {
        // 转换为整数并校验有效性（设置合理范围：8-30px）
        const fontSize = Math.max(8, Math.min(30, parseInt(value, 10) || 12));

        // 更新配置中的标签字体大小（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelFontSize = fontSize;

        // 如果有当前图表配置，同步更新系列标签的字体大小
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].label = currentOptions.series[index].label || {};
                // 确保textStyle对象存在（ECharts中字体大小通常在textStyle中）
                currentOptions.series[index].label.textStyle = currentOptions.series[index].label.textStyle || {};

                // 设置标签字体大小
                currentOptions.series[index].label.textStyle.fontSize = fontSize;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签颜色更新方法
    updateSeriesLabelColor(value, currentOptions) {
        // 确保颜色值有效（默认使用深灰色）
        const color = value || '#333';

        // 更新配置中的标签颜色（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelColor = color;

        // 如果有当前图表配置，同步更新系列标签的颜色
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].label = currentOptions.series[index].label || {};

                // 设置标签颜色
                currentOptions.series[index].label.color = color;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签位置更新方法
    updateSeriesLabelPosition(value, currentOptions) {
        // 标签位置有效值校验（ECharts支持的位置：top/right/bottom/left/inside/insideLeft等）
        const validPositions = ['top', 'right', 'bottom', 'left', 'inside', 'insideLeft', 'insideRight', 'insideTop', 'insideBottom'];
        const position = validPositions.includes(value) ? value : 'top'; // 默认顶部

        // 更新配置中的标签位置（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelPosition = position;

        // 如果有当前图表配置，同步更新系列标签的位置
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].label = currentOptions.series[index].label || {};

                // 设置标签位置
                currentOptions.series[index].label.position = position;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签显示状态更新方法
    updateSeriesLabelShow(value, currentOptions) {
        // 将值转换为布尔类型（处理radio组件可能返回的字符串值）
        const showLabel = value === 'true' || value === true;

        // 更新配置中的标签显示状态（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelShow = showLabel;

        // 如果有当前图表配置，同步更新系列标签的显示状态
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                // 确保label配置对象存在
                currentOptions.series[index].label = currentOptions.series[index].label || {};

                // 设置标签显示状态
                currentOptions.series[index].label.show = showLabel;
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 重新渲染图表
    reRenderChart() {
        const { buildConfig } = window.attributeUtils;
        const config = this.getDefaultConfig();

        const seriesConfig = buildConfig(this, config.seriesAttrs);
        const titleConfig = buildConfig(this, config.titleAttrs);
        const gridConfig = buildConfig(this, config.gridAttrs);
        const xAxisConfig = buildConfig(this, config.xAxisAttrs);
        const yAxisConfig = buildConfig(this, config.yAxisAttrs);
        const legendConfig = buildConfig(this, config.legendAttrs);

        this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig);
    }

    // 更新总和颜色
    updateSumColor(color, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series) && currentOptions.series.length >= 2) {
            // 实际数据系列是第二个系列（索引1）
            const dataSeries = currentOptions.series[1];
            if (dataSeries.data && dataSeries.data.length > 0) {
                // 最后一个数据点是总和
                const sumDataIndex = dataSeries.data.length - 1;
                dataSeries.data[sumDataIndex].itemStyle = {
                    color: color
                };
                this.chart.setOption(currentOptions);
            }
        }
    }

    // 更新连接线
    updateConnector(value, name, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            // 连接线是最后一个系列
            let connectorSeries = currentOptions.series.find(s => s.type === 'line');

            if (name === 'waterfall-connector-show_radio') {
                const show = value === 'true';

                if (show && !connectorSeries) {
                    // 需要显示但没有连接线系列，重新渲染
                    this.reRenderChart();
                } else if (!show && connectorSeries) {
                    // 需要隐藏连接线
                    connectorSeries.data = [];
                    this.chart.setOption(currentOptions);
                }
            } else if (name === 'waterfall-connector-color_colorpicker' && connectorSeries) {
                // 更新连接线颜色
                connectorSeries.lineStyle.color = value;
                this.chart.setOption(currentOptions);
            }
        }
    }
}

// 注册自定义元素
customElements.define('waterfall-chart', WaterfallChart);
